<meta charset="UTF-8">

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>

<script>

    $(
        function(){
            window.onscroll = function(){
                if(document.body.scrollTop>50){
                    $(".tab .top").css("position","fixed")
                        .css("top","0px");
                }else{
                    $(".tab .top").css("position","");
                }

                var st = document.body.scrollTop;
                var ch = document.body.clientHeight;


                $(".newimg").each(
                    function(){
                        var imgtop = $(this).offset().top;

                        if(imgtop>st&&imgtop<st+ch-50){
                            $(this)[0].className = "oldimg";
                            $(this).attr("src",$(this).attr("src2"));
                        }
                    }
                );

            };
        }
    );

    //确定那一个搜索词
    var dataId;
    //为了后面来选定搜索词
    var words = ["","精选","食品","母婴","酒饮"
        ,"清洁","个护","居家","内衣"];

    var jdurl = "https://img13.360buyimg.com/n7/";

    var datas;

    function jddata(data){
       // $("#loading").show();
       // $(".tab").hide();

        for(var key in data){
            datas = data[key];
        }

        //html("")  ==> innerHTML = ""
        $(".tab>:last-child>:nth-of-type("+(dataId)
            +")").html("");

        for(var i=0;i<datas.length;i++){
            var pro = datas[i];
            var $newpro = $("#protemp").clone(true);

            $newpro.find("img").attr("src2",jdurl+pro.image_url)
                .addClass("newimg");
            $newpro.find("img").click(
                function(){
                    sessionStorage.currentPro = JSON.stringify(pro);
                    location  = "pro.html";
                }
            );
            $newpro.find(".title").html(pro.ad_title);
            $newpro.find(".price").html("&yen;"+pro.pc_price);
            $newpro.show();

            $(".tab>:last-child>:nth-of-type("+(dataId)
                +")").append($newpro);
        }



        $(".loading").hide();
        $(".loading")[0].stopLoading("拼命加载中");
        $(".tab").show(300,function(){
            document.body.scrollTop = 1;
        });


    }
</script>

<style>
    *{
        margin:0px;
        padding:0px;
    }
    .tab{
        font-size:28px;

    }
    .tab .top{
        width:10rem;
        overflow:auto;
    }
    .tab span{
        width:120px;
        height:80px;
        text-align:center;
        line-height:80px;
        display:block;
        float:left;
    }
    .nav_box{
        position:relative;
        display:table;
        content:"";
        clear:both;
    }
    .my_bottom_line{
        width:120px;
        height:2px;
        background:red;
        position:absolute;
        left:0px;
        bottom:0px;
        transition:all .2s;
    }

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar
    {
        width: 16px;
        height: 0px;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }

</style>

<div class="loading" >拼命加载中</div>

<div id="protemp" style="display:none">
    <div class="pic">
        <img src="https://ms.m.jd.com/seckill/images/defaultGoodsImage.png"/>
    </div>
    <div class="txtprice">
        <div class="title"></div>
        <div class="price"></div>
    </div>
</div>

<div style="width:100%;height:50px;background:#ccc"></div>

<div class="tab">
    <div class="top" style="background:white;">
       <div style="width:960px;" class="nav_box">
           <span class="span_selected">

               精选</span>
           <span>食品</span>
           <span>母婴</span>
           <span>酒饮</span>
           <span>清洁</span>
           <span>个护</span>
           <span>居家</span>
           <span>内衣</span>
           <div class="my_bottom_line"></div>
       </div>
    </div>
    <div style="padding-top:100px">
        <div class="jingxuan">

        </div>
        <div class="shipin">
            食品
        </div>
        <div class="muyin">
            母婴
        </div>
        <div class="jiuyin">
            酒饮
        </div>
        <div class="qingjie">
            清洁
        </div>
        <div class="gehu">
            个护
        </div>
        <div class="jiujia">
            居家
        </div>
        <div class="neiyi">
            内衣
        </div>
    </div>
</div>
<script>
    $(start);
    function start(){

        $(".tab>:last-child>*").hide();
        $(".tab>:last-child>:first-child").show();

        $(".nav_box span").click(
            function(){
                var index = $(this).index();
                $(".my_bottom_line")
                    .css("left",index*120+"px");
                var $current_tab = $(this).parents(".tab");
                $current_tab.find(">:last-child>*").hide();
                $current_tab.find(">:last-child>:nth-of-type("+(index+1)
                    +")").show();

                loadData(index+1);
            }
        );

        loadData(1);


    }

    function loadData(id){

        $(".loading").show();
        $(".tab").hide();

        dataId = id;
        $(".jdscript").remove();
        var jdscript = document.createElement("script");
        jdscript.src="https://x.jd.com/Search?callback=jddata&area=1&enc=utf-8&keyword="+words[id]
            +"&adType=7&page=2&ad_ids=291%3A33&xtest=new_search&_=1516261707892";
        jdscript.className = "jdscript";
       document.body.appendChild(jdscript);
       //这一句执行后会自动调用jddata函数
    }
</script>

<script src="loading.js"></script>